<template>
    <el-button-group>
        <el-button type="success" size="small" @click="bindAddMenu"
            >添加父级菜单</el-button
        >
        <el-button type="warning" size="small" @click="bindAddMenuC"
            >添加子级菜单</el-button
        >
        <el-button type="primary" size="small" @click="bindRefrechMenu"
            >刷新</el-button
        >
        <el-button type="info" size="small" @click="bindEditMenu_F"
            >编辑</el-button
        >
        <el-button type="danger" size="small" @click="bindDelateFatherMenu"
            >删除</el-button
        >
    </el-button-group>
    <el-row style="margin-top: 20px">
        <el-col :span="4">
            <!-- :data="data" -->
            <el-tree
                :data="menuList"
                @node-click="handleNodeClick"
                default-expand-all
                :expand-on-click-node="false"
            />
        </el-col>
        <el-col :span="20">
            <el-table :data="subMenuList" border stripe>
                <el-table-column prop="id" label="序号" />
                <el-table-column prop="label" label="名称" />
                <el-table-column prop="path" label="路径" />
                <el-table-column prop="iconCls" label="图标" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                            size="small"
                            type="info"
                            @click="bindEditMenu_C(scope.row.id)"
                            >编辑</el-button
                        >
                        <el-button
                            size="small"
                            type="danger"
                            @click="onEditMenu_C(scope.row.id, 'delete')"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

    <!-- 添加父菜单 -->
    <el-dialog title="添加父菜单" v-model="disableAddMenuForm" width="50%">
        <el-form ref="routerFormRef" label-width="80px" :model="routerForm">
            <!-- :rules="rules" -->
            <el-form-item label="序号">
                <el-input v-model.number="routerForm.id"></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="routerForm.name"></el-input>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="routerForm.path"></el-input>
            </el-form-item>
            <el-form-item label="图标">
                <el-input v-model="routerForm.icon"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button type="primary" @click="closeAddMenuForm"
                    >关闭</el-button
                >
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 添加子菜单 -->
    <el-dialog title="添加子菜单" v-model="disableAddMenuFormC" width="50%">
        <el-form ref="routerFormRefC" label-width="80px" :model="routerFormC">
            <!-- :rules="rules" -->
            <el-form-item label="序号">
                <el-input v-model.number="routerFormC.id"></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="routerFormC.name"></el-input>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="routerFormC.path"></el-input>
            </el-form-item>
            <el-form-item label="图标">
                <el-input v-model="routerFormC.icon"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmitC">确定</el-button>
                <el-button type="primary" @click="closeAddMenuFormC"
                    >关闭</el-button
                >
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 编辑父菜单 -->
    <el-dialog title="编辑父菜单" v-model="editDialog_F" width="50%">
        <el-form ref="routerFormRefC" label-width="80px" :model="editForm_F">
            <!-- :rules="rules" -->
            <el-form-item label="昵称">
                <el-input v-model="editForm_F.name"></el-input>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="editForm_F.path"></el-input>
            </el-form-item>
            <el-form-item label="图标">
                <el-input v-model="editForm_F.icon"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onEditMenu_F">确定</el-button>
                <el-button type="primary" @click="closeEidt_F">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 编辑父菜单 -->
    <el-dialog title="编辑子菜单" v-model="editDialog_C" width="50%">
        <el-form ref="routerFormRefC" label-width="80px" :model="editForm_C">
            <!-- :rules="rules" -->
            <el-form-item label="昵称">
                <el-input v-model="editForm_C.name"></el-input>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="editForm_C.path"></el-input>
            </el-form-item>
            <el-form-item label="图标">
                <el-input v-model="editForm_C.icon"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onEditMenu_C">确定</el-button>
                <el-button type="primary" @click="closeEidt_C">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, type Ref, onMounted } from 'vue'
// import { RequestMenu, RequestSubMenu } from '@/api/index'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const menuList = ref([])
const subMenuList = ref([{ id: 0, label: '', path: '', sort: 0 }])
const parentId: Ref<number> = ref(0) //根菜单

const data = [
    {
        id: 1,
        label: 'Level one 1',
        children: [
            {
                id: 4,
                label: 'Level two 1-1',
                children: [
                    {
                        id: 9,
                        label: 'Level three 1-1-1',
                    },
                    {
                        id: 10,
                        label: 'Level three 1-1-2',
                    },
                ],
            },
        ],
    },
    {
        id: 2,
        label: 'Level one 2',
        children: [
            {
                id: 5,
                label: 'Level two 2-1',
            },
            {
                id: 6,
                label: 'Level two 2-2',
            },
        ],
    },
    {
        id: 3,
        label: 'Level one 3',
        children: [
            {
                id: 7,
                label: 'Level two 3-1',
            },
            {
                id: 8,
                label: 'Level two 3-2',
            },
        ],
    },
]

onMounted(() => {
    getRootMenuList()
    getSubMenuList(1)
})
// 左侧树状图
const getRootMenuList = async () => {
    let roleId = localStorage.getItem('ROID')
    const res = await axios({
        method: 'get',
        // url: 'http://localhost:3000/sys/menu',
        // params:{
        //     roleId
        // }
        url: 'http://localhost:3000/sys/operator_menu',
        params: {
            id: 1,
        },
    })
    const { code, sysmenu } = res.data
    if (code === 1) {
        menuList.value = sysmenu
        // console.log(sysmenu);
    }
}

/**
 * 子菜单列表
 * @param data
 */
const getSubMenuList = async (menuId: number) => {
    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/sys/submenu',
        params: {
            menuId,
        },
    })
    const { code, submenu } = res.data
    if (code === 1) {
        subMenuList.value = submenu.filter(item => {
            if (item.id == menuId) return item.children
        })[0].children
        // console.log(subMenuList.value)
    }
}
/**
 * 树形菜单节点
 * @param data
 */
const handleNodeClick = data => {
    parentId.value = data.id //菜单id
    console.log('data.id>>>', data.id)
    getSubMenuList(data.id)
}
// {"id": 40, "path": "/main_account", "label": "访客管理", "iconCls": "Setting", "children":
// [{"id": 41, "path": "/account/list", "label": "访客列表", "iconCls": "icon", "meta_title": "访客列表", "meta_requireAuth": false}, {"id": 42, "path": "/account/statistics", "label": "访客统计", "iconCls": "icon", "meta_title": "访客统计", "meta_requireAuth": false}]
// , "meta_title": "访客管理", "meta_requireAuth": "true"}
// 添加父菜单
const routerForm = ref({
    id: '',
    name: '',
    path: '',
    icon: '',
})
const disableAddMenuForm: Ref<boolean> = ref(false)
// 打开添加父菜单
const bindAddMenu = () => {
    disableAddMenuForm.value = true
}
// 提交父菜单
const onSubmit = async () => {
    let fObj
    const { id, name, path, icon } = routerForm.value
    fObj = {
        id,
        path,
        label: name,
        iconCls: icon,
        meta_title: name,
        meta_requireAuth: true,
        children: [],
    }
    console.log(menuList.value)
    console.log(fObj)
    let updatemenu = JSON.parse(JSON.stringify(menuList.value))
    updatemenu.push(fObj)
    console.log(updatemenu)
    const res = await axios({
        method: 'post',
        url: 'http://localhost:3000/sys/add_fathermenu',
        data: {
            updatemenu,
        },
    })
    const { code } = res.data
    if (code === 1) {
        ElMessage({
            type: 'success',
            message: '添加成功',
        })
    } else {
        ElMessage({
            type: 'error',
            message: '添加失败',
        })
    }
    disableAddMenuForm.value = false
    routerForm.value = {
        id: '',
        name: '',
        path: '',
        icon: '',
    }
}
// 关闭父菜单
const closeAddMenuForm = () => {
    disableAddMenuForm.value = false
}

// 添加子菜单
const routerFormC = ref({
    id: '',
    name: '',
    path: '',
    icon: '',
})
const disableAddMenuFormC = ref(false)
// 打开添加子菜单
const bindAddMenuC = () => {
    if (parentId.value == 0) {
        alert('请选择父菜单')
        return
    } else disableAddMenuFormC.value = true
}
// 提交子菜单
const onSubmitC = async () => {
    // parentId

    const { id, name, path, icon } = routerFormC.value
    let cObj
    cObj = {
        id,
        path,
        label: name,
        iconCls: icon,
        meta_title: name,
        meta_requireAuth: true,
    }
    console.log(menuList.value)
    console.log(cObj)
    // console.log(menuList.value.find(item=>item.id == parentId.value));
    let updatemenu = JSON.parse(JSON.stringify(menuList.value))
    updatemenu.forEach(item => {
        if (item.id == parentId.value) item.children.push(cObj)
        return item
    })
    console.log(updatemenu)
    const res = await axios({
        method: 'post',
        url: 'http://localhost:3000/sys/add_fathermenu',
        data: {
            updatemenu,
        },
    })
    const { code } = res.data
    if (code === 1) {
        ElMessage({
            type: 'success',
            message: '添加成功',
        })
        getRootMenuList()
        getSubMenuList(1)
    } else {
        ElMessage({
            type: 'error',
            message: '添加失败',
        })
    }
    disableAddMenuFormC.value = false
    routerFormC.value = {
        id: '',
        name: '',
        path: '',
        icon: '',
    }
}
// 删除父菜单
const bindDelateFatherMenu = async () => {
    if (parentId.value == 0) {
        alert('请选择父菜单')
        return
    }
    let updatemenu = JSON.parse(JSON.stringify(menuList.value))
    updatemenu = updatemenu.filter(item => {
        if (item.id != parentId.value) return item
    })
    const res = await axios({
        method: 'post',
        url: 'http://localhost:3000/sys/add_fathermenu',
        data: {
            updatemenu,
        },
    })
    const { code } = res.data
    if (code === 1) {
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
        getRootMenuList()
    } else {
        ElMessage({
            type: 'error',
            message: '删除失败',
        })
    }
}

// 关闭子菜单
const closeAddMenuFormC = () => {
    disableAddMenuFormC.value = false
}
// 刷新
const bindRefrechMenu = () => {
    getRootMenuList()
    getSubMenuList(1)
}

// 编辑父菜单弹框
const editDialog_F = ref(false)
const bindEditMenu_F = () => {
    console.log(parentId.value)
    if (parentId.value == 0) {
        alert('请选择父菜单')
        return
    }
    editDialog_F.value = true
}
const closeEidt_F = () => {
    editDialog_F.value = false
}
/**
 * 编辑父菜单
 */
const editForm_F = ref({
    name: '',
    path: '',
    icon: '',
})
const onEditMenu_F = async id => {
    let updatemenu = JSON.parse(JSON.stringify(menuList.value))
    // console.log(1);
    updatemenu = updatemenu.map(item => {
        if (item.id == parentId.value) {
            // console.log('item>>>',item);
            item = {
                ...item,
                label: editForm_F.value.name,
                meta_title: editForm_F.value.name,
                path: editForm_F.value.path,
                iconCls: editForm_F.value.icon,
            }
            // console.log('item2>>>',item);
        }
        return item
    })
    // console.log(2);
    console.log(updatemenu)
    const res = await axios({
        method: 'post',
        url: 'http://localhost:3000/sys/add_fathermenu',
        data: {
            updatemenu,
        },
    })
    const { code } = res.data
    if (code === 1) {
        ElMessage({
            type: 'success',
            message: '修改成功',
        })
        getRootMenuList()
        getSubMenuList(1)
    } else {
        ElMessage({
            type: 'error',
            message: '修改失败',
        })
    }
    editDialog_F.value = false
    getRootMenuList()
}

// 编辑子菜单弹框
const editDialog_C = ref(false)
const childId = ref('')
const bindEditMenu_C = id => {
    childId.value = id
    console.log('parentId.value>>>', parentId.value)
    console.log('childId.value>>>', childId.value)

    if (parentId.value == 0) {
        alert('请选择父菜单')
        return
    }
    editDialog_C.value = true
}
const closeEidt_C = () => {
    childId.value = ''
    editDialog_C.value = false
}
/**
 * 编辑子菜单
 */
const editForm_C = ref({
    name: '',
    path: '',
    icon: '',
})
const onEditMenu_C = async (id, str) => {
    let updatemenu = JSON.parse(JSON.stringify(menuList.value))
    console.log('childId.value>>>', childId.value)
    if (str == 'delete') {
        childId.value = id
        updatemenu = updatemenu.map(item => {
            if (item.id == parentId.value) {
                // console.log('item.children>>>',item.children);
                item.children = item.children.filter(itemC => {
                    if (itemC.id != childId.value) {
                        return itemC
                    }
                })
                // console.log('item.children>>>',item.children);
            }
            return item
        })
        const res = await axios({
            method: 'post',
            url: 'http://localhost:3000/sys/add_fathermenu',
            data: {
                updatemenu,
            },
        })
        const { code } = res.data
        if (code === 1) {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            getRootMenuList()
            getSubMenuList(parentId.value)
        } else {
            ElMessage({
                type: 'error',
                message: '删除失败',
            })
        }
    } else {
        updatemenu = updatemenu.map(item => {
            if (item.id == parentId.value) {
                // console.log('item.children>>>',item.children);
                item.children = item.children.map(itemC => {
                    if (itemC.id == childId.value) {
                        itemC = {
                            ...itemC,
                            label: editForm_C.value.name,
                            meta_title: editForm_C.value.name,
                            path: editForm_C.value.path,
                            iconCls: editForm_C.value.icon,
                        }
                        console.log('itemC>>>', itemC)
                    }
                    return itemC
                })
                // console.log('item.children>>>',item.children);
            }
            return item
        })
        const res = await axios({
            method: 'post',
            url: 'http://localhost:3000/sys/add_fathermenu',
            data: {
                updatemenu,
            },
        })
        const { code } = res.data
        if (code === 1) {
            ElMessage({
                type: 'success',
                message: '编辑成功',
            })
            getRootMenuList()
            getSubMenuList(parentId.value)
        } else {
            ElMessage({
                type: 'error',
                message: '编辑失败',
            })
        }
    }
    console.log(updatemenu)
    closeEidt_C()
}
</script>

<style scoped></style>
